<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>不可回购筛选</title>
    <link rel="stylesheet" href="../../css/reset.css" />
    <style>
        body {
            width: 100%;
            height: auto;
            background-color: rgba(0, 0, 0, 0.4);
            font-family: PingFangSC-Regular, sans-serif;
            color: #333333;
            font-size: 0.28rem;
            position: relative;
        }

        .typeChoose {
            width: 100%;
            height: auto;
            box-sizing: border-box;
            background-color: #fff;
            position: fixed;
            top: 0;
            left: 0;
        }

        .typeChoose div {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: flex-start;
            padding-left: 0.3rem;
            box-sizing: border-box;
        }

        .typeChoose div p {
            width: 100%;
        }

        .typeChoose div p:first-of-type {
            height: 0.95rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
        }

        .typeChoose div p:last-of-type {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 0.3rem;
        }

        .typeChoose div p:last-of-type span {
            height: 0.56rem;
            width: 1.36rem;
            display: flex;
            display: -webkit-flex;
            font-size: 0.24rem;
            align-items: center;
            justify-content: center;
            color: #999999;
            border: 1px solid #e4e4e4;
            border-radius: 0.1rem;
            margin-right: 0.35rem;
        }

        .typeChoose div p:last-of-type span:first-of-type {
            background-color: #ffd203;
            color: #181818;
        }

        button {
            border: none;
            outline: none;
            background-color: #fff;
            padding: 0.15rem 0.3rem;
        }

        .showButton {
            width: 100%;
            height: 0.96rem;
            box-sizing: border-box;
            border-top: 1px solid #e2e2e2;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0.39rem 0 0.28rem;
            font-size: 0.28rem;
            color: #181818;
        }

        .showButton button:first-of-type {
            color: #626262;
        }

        .showButton button:nth-of-type(2) {
            color: #898989;
            border: 1px solid #e4e4e4;
            border-radius: 0.1rem;
        }
    </style>
</head>

<body id="test">
    <div class="typeChoose">
        <div>
            <p>
                合约状态
            </p>
            <p class="payMethod" style="flex-wrap: wrap;">
                <span data-pay="ALL">
                    全部
                </span>
                <span data-pay="KW">
                    在挖
                </span>
                <span data-pay="DW">
                    待挖
                </span>
                <span data-pay="DQ">
                    已到期
                </span>
            </p>
        </div>
        <div>
            <p>
                电费包状态
            </p>
            <p class="worktype">
                <span data-work="0">
                    全部
                </span>
                <span data-work="3">
                    未到期
                </span>
                <span data-work="1">
                    已到期
                </span>
                <span data-work="2">
                    即将到期
                </span>
            </p>
        </div>
        <p class="showButton">
            <button id="calanceButton" style="font-size: 0.26rem;">
                取消
            </button>
            <button id="clearChooe" style="font-size: 0.26rem;">
                清空筛选
            </button>
            <button id="sureChoose" style="font-size: 0.26rem;">
                确定
            </button>
        </p>
    </div>
</body>
<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/app.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        var chooseItem = JSON.parse(app.getSyncStorage("newmypowerdalog"));

        $(".payMethod span").on("click", function () {
            $(".payMethod span").css({
                backgroundColor: "#fff",
                color: " #999999"
            })
            $(this).css({
                backgroundColor: "#ffd203",
                color: "#181818"
            })
            chooseItem.state = $(this).attr("data-pay");
        })
        $(".worktype span").on("click", function () {
            $(".worktype span").css({
                backgroundColor: "#fff",
                color: " #999999"
            })
            $(this).css({
                backgroundColor: "#ffd203",
                color: "#181818"
            })
            chooseItem.electricendType = $(this).attr("data-work");
        });
        $("#calanceButton").click(function () {
            app.closeF("newnoruendilog");
        })
        $("#clearChooe").click(function () {
            $(".worktype span:first-of-type,.payMethod span:first-of-type").click();
            chooseItem.state = "ALL";
            chooseItem.electricendType = 0;
            app.setStorage("newmypowerdalog", chooseItem);
            app.trigger("chooseMycalcPower", chooseItem);
        });
        $("#sureChoose").on("click", function () {
            app.trigger("chooseMycalcPower", chooseItem);
            app.setStorage("newmypowerdalog", chooseItem);
            app.closeF("newnoruendilog");
        });
        $(".worktype").find('span[data-work="' + chooseItem.electricendType + '"]').click();
        $(".payMethod").find('span[data-pay="' + chooseItem.state + '"]').click();
    }
</script>

</html>